﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>消息中心</title>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
        <meta content="yes" name="apple-mobile-web-app-capable"/>
        <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
        <meta content="telephone=no" name="format-detection"/>
        <link href="/js/bootstrap/css/style.css" rel="stylesheet" type="text/css"/>
        <script src="/js/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="/js/bootstrap/js/bootstrap.min.js"></script>
        <script src="/js/plugins/jrender/jrender.min.js"></script>
        <script src="/js/plugins/jquery-form/jquery.form.js"></script>
        <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
        <script src="/js/plugins/dialog2/dialog.min.js"></script>
        <script src="../js/plugins/bootstrap-4.1.1-dist/js/tab.js"></script>
<script>
    $(function () {
        var userStr = sessionStorage.getItem("user");
        var user = JSON.parse(userStr);
        //直接将currentPage写死,那么只会查询到第二页的数据,之前的data数据丢失,所以此处定义一个临时变量存放data的参数
        var dataList=[];
        var currentPage =1;
        var totalPage=0;
        //查@我的
        function CommentMeQuery() {
            $.get("/users/"+user.id+"/CommentMe",{userId:user.id,currentPage:currentPage,pageSize:3},function (data) {
                $.merge(dataList,data.list)
                console.log(dataList);
                $("#addMe").renderValues({list:dataList},{
                    setHtml:function (item, value) {
                        var html="";
                        html=value+"评论了你的评论";
                        $(item).html(html)
                    },
                    setHref:function (item, value) {
                        var href=$(item).data("href");
                        $(item).attr("href",href+value)
                    }
                })
                currentPage +=1;
                totalPage = data.pages;
            })
        }
        CommentMeQuery();
        $(window).scroll(function () {
            if($(window).height()+$(window).scrollTop()>=$(document).height()){
                //console.log($(window).height());console.log($(window).scrollTop());console.log($(document).height());
                //判断当前页是否小于等于总页数
                if(currentPage<=totalPage){
                    CommentMeQuery();
                }
                else{
                    $(document).dialog({
                        type : 'notice',
                        infoText: '亲.我也是有限度的',
                        autoClose: 2500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
            }
        })
    })
</script>
    </head>
    <body>

       

        <section class="aui-flexView">
            <header class="aui-navBar aui-navBar-fixed">
                <a href="message.html" class="aui-navBar-item">
                    <i class="icon icon-return"><</i>
                </a>
                <div class="aui-center">
                    <span class="aui-center-title">消息中心</span>
                </div>
                <a href="javascript:;" class="aui-navBar-item">
                    <i class="icon icon-more"></i>
                </a>
            </header>
            <section class="aui-scrollView">
                <div class="aui-tab" data-ydui-tab>
                    <ul class="tab-nav">
                        <li class="tab-nav-item tab-active">
                            <a href="javascript:;">评论我的</a>
                        </li>
                      
                    </ul>
                    <div id="addMe">
                        <div class="tab-panel-item" render-loop="list">
                            <a data-href="strategySunComment.html?id=" render-fun="setHref" render-key="list.strategySunComment.id" class="aui-flex b-line">
                                <div class="aui-look-img">
                                    <img render-src="list.replyUser.headImgUrl">

                                </div>
                                <div class="aui-flex-box">
                                    <h3  render-fun="setHtml" render-key="list.replyUser.nickName"></h3>
                                    <p render-html="list.content"></p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                </div>
            </section>
        </section>

    </body>
</html>
